<template>
  <div ref="china" :class="className" :style="{ height: height, width: width }" />
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import './china.js'
import * as echarts from "echarts";
import { reSize } from "../hooks/resize";
const props = withDefaults(
  defineProps<{
    className?: string;
    width?: string;
    height?: string;
  }>(),
  {
    className: "chart",
    width: "100%",
    height: "750px",
  }
);
const data = [
  {
    name: '内蒙古',
    itemStyle: {
      areaColor: '#56b1da'
    },
    value: [110.3467, 41.4899]
  }
]
const china = ref()
let charts: echarts.ECharts | null
const init = () => {
  charts = echarts.init(china.value)
  charts.setOption({
    geo: {
      map: "china",
      aspectScale: 0.8,
      layoutCenter: ["50%", "50%"],
      layoutSize: "100%",
      itemStyle: {
        //  normal: {
        areaColor: {
          type: "linear-gradient",
          x: 0,
          y: 1200,
          x2: 1000,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#152E6E", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#0673AD", // 50% 处的颜色
            },
          ],
          global: true, // 缺省为 false
        },
        shadowColor: "#0f5d9d",
        shadowOffsetX: 0,
        shadowOffsetY: 15,
        opacity: 0.5,
        // },

      },
      emphasis: {
        areaColor: "#0f5d9d",
      },

      regions: [
        {
          name: "南海诸岛",
          itemStyle: {
            areaColor: "rgba(0, 10, 52, 1)",
            borderColor: "rgba(0, 10, 52, 1)",
            opacity: 0,
            label: {
              show: false,
              color: "#009cc9",
            },
          },
          label: {
            show: false,
            color: "#FFFFFF",
            fontSize: 12,
          },
        },
      ],
    },
    series: [
      {
        type: "map",
        map: "china",
        aspectScale: 0.8,
        layoutCenter: ["50%", "50%"], //地图位置
        layoutSize: "100%",
        label: {
          show: true,
          color: "#FFFFFF",
          fontSize: 12,
        },
        itemStyle: {
          areaColor: "#0c3653",
          borderColor: "#1cccff",
          borderWidth: 1.8,
        },
        emphasis: {
          areaColor: "#56b1da",
          label: {
            show: true,
            color: "#fff",
          },
        },
        data: data,
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'pin',
        symbolSize: [45, 45],
        label: {
          show: true,
          color: "#fff",
          formatter(value: any) {
            return value.data.value[2]
          }
        },
        itemStyle: {
          color: '#1E90FF', //标志颜色
        },
        data: data,
      },
    ],
  })
  reSize(charts)
}
onMounted(() => {
  init();
});
onBeforeMount(() => {
  if (!charts) {
    return;
  }
  charts.dispose();
  charts = null;
});
</script>

<style scoped lang='scss'>

</style>